<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>确认支付</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/style.css"/>
    <link type="text/css" rel="stylesheet" media="screen" href="__FONT__/css/media.css"/>
    <script type="text/javascript" src="__FONT__/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $(".pay_discount h1").click(function() {
            $(".pay_show").slideToggle();
        });
        $(".pay_show dd").click(function() {
            $(this).children('label').after('<i></i>');
            $(this).siblings().children('i').hide();
            $(".add_pay").html($(this).html());
            $(".pay_show").slideToggle('slow');
            // alert($(this).html())
        });
        
        $(".ol_a li").click(function() {
        	var index = $(this).index();
        	
            $(this).addClass('ol_li').siblings().removeClass('ol_li');
            $(this).children('a').addClass('fontSelectStart').parent()
            	.siblings()
            	.children('a')
            	.removeClass('fontSelectStart');
            
            var start = index + 1;
            var startElem = $(".ol_star span").eq(index);
            startElem.addClass('act').prevAll().addClass('act');
            startElem.nextAll().removeClass('act');
            
            $('#professional').val(start);
            $('#punctuality').val(start);
            $('#communication').val(start);
            
            $(".star_go li").each(function (i, o) {
            	var selectStart = $(o).find('span').eq(index);
            	selectStart.addClass('bct').prevAll().addClass('bct');
            	selectStart.nextAll().removeClass('bct');
            });
        });

        function updateTotalStart() {
        	 var professional = parseInt($('#professional').val());
        	 var punctuality = parseInt($('#punctuality').val());
        	 var communication = parseInt($('#communication').val());
             
             var start = Math.floor((professional + punctuality + communication)/3);
             var startElem = $(".ol_star span").eq(start - 1);
             startElem.addClass('act').prevAll().addClass('act');
             startElem.nextAll().removeClass('act');
             
             var selectedElem = $('.ol_a').find('li').eq(start - 1);
           	 selectedElem.addClass('ol_li').siblings().removeClass('ol_li');
           	 selectedElem.children('a').addClass('fontSelectStart').parent()
             	.siblings()
             	.children('a')
             	.removeClass('fontSelectStart');
        }
        
        $(".star_go li:eq(0) span").click(function() {
            $(this).addClass('bct').prevAll().addClass('bct');
            $(this).nextAll().removeClass('bct');
            
            start = $(this).index();
            $('#professional').val(start);
            updateTotalStart()
        });
        $(".star_go li:eq(1) span").click(function() {
            $(this).addClass('bct').prevAll().addClass('bct');
            $(this).nextAll().removeClass('bct');
            
            start = $(this).index();
            $('#punctuality').val(start);
            updateTotalStart()
        });
        $(".star_go li:eq(2) span").click(function() {
            $(this).addClass('bct').prevAll().addClass('bct');
            $(this).nextAll().removeClass('bct');
            
            start = $(this).index();
            $('#communication').val(start);
            updateTotalStart()
        });
    });
	</script>
	<style>
	#uploadCommentPhoto {
	    width: 100%;
    	height: 100%;
	    filter: alpha(opacity=0);
	    -moz-opacity: .0;
	    opacity: 0.0;
	    cursor: pointer;
	    top: 0;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    position: absolute;
	}
	
	.fontSelectStart{color: #f04877 !important;}
	
	.div_img {
	  position: relative;
	  width: 80px;
	  height: 80px;
	}
	
	.div_img .progress {
		position: absolute;
		bottom: 0;
		z-index: 10;
		left: 0;
		right: 0;
	}
	.progress {
	    height: 10px;
	    overflow: hidden;
	    background-color: #f5f5f5;
	    border-radius: 4px;
	    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	}
	.progress-bar {
	    float: left;
	    width: 0;
	    height: 100%;
	    font-size: 12px;
	    line-height: 10px;
	    color: #fff;
	    text-align: center;
	    background-color: #337ab7;
	    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	    -webkit-transition: width .6s ease;
	    -o-transition: width .6s ease;
	    transition: width .6s ease;
	}
	.progress.sm, .progress-sm, .progress.sm .progress-bar, .progress-sm .progress-bar {
	    border-radius: 1px;
	}
	.progress-bar.active, .progress.active .progress-bar {
	    -webkit-animation: progress-bar-stripes 2s linear infinite;
	    -o-animation: progress-bar-stripes 2s linear infinite;
	    animation: progress-bar-stripes 2s linear infinite;
	}
	.progress-bar-green, .progress-bar-success {
	    background-color: #00a65a;
	}
	.sr-only {
	    position: absolute;
	    width: 1px;
	    height: 1px;
	    padding: 0;
	    margin: -1px;
	    overflow: hidden;
	    clip: rect(0,0,0,0);
	    border: 0;
	}
	</style>
</head>
<body style="background:#f7f7f9;">
	<section class="beauty_sec beauty_pay">
      <div class="pay_main online">
        <h1>评价满[50字+2图]且内容优质，有机会赢100积分或优惠券，上不封顶。（评价需要1-2个审核日）</h1>
        <h2>服务项目：<span>{$item.service_name}</span><label>￥{$item.price}</label></h2>
        <div class="pay_myself">
          <img src="__FONT__/images/btylist_01.png">
          <dd>
            <strong><span>美&nbsp;&nbsp;容&nbsp;&nbsp;师：</span><label>吴丹丹</label></strong>
            <strong><span>服务时间：</span><label>{$item.service_time}分钟</label></strong>
          </dd>
        </div>
      </div>
      <div class="ol_a">
         <ul class="clear">
            <li class="<eq name='comment.start' value='1'>ol_li</eq>"><a href="javascript:;" class="ol_a1 <eq name='comment.start' value='1'>fontSelectStart</eq>"><i></i><span>差</span></a></li>
            <li class="<eq name='comment.start' value='2'>ol_li</eq>"><a href="javascript:;" class="ol_a2 <eq name='comment.start' value='2'>fontSelectStart</eq>"><i></i><span>一般</span></a></li>
            <li class="<eq name='comment.start' value='3'>ol_li</eq>"><a href="javascript:;" class="ol_a3 <eq name='comment.start' value='3'>fontSelectStart</eq>"><i></i><span>满意</span></a></li>
            <li class="<eq name='comment.start' value='4'>ol_li</eq>"><a href="javascript:;" class="ol_a4 <eq name='comment.start' value='4'>fontSelectStart</eq>"><i></i><span>非常满意</span></a></li>
            <li class="<eq name='comment.start' value='5'>ol_li</eq>"><a href="javascript:;" class="ol_a5 <eq name='comment.start' value='5'>fontSelectStart</eq>"><i></i><span>满分</span></a></li>
         </ul>
      </div>
      <form action="{:U('Order/comment')}" method="post">
      	<input type="hidden" name="post_id" value="{$item.id}">
      	<input type="hidden" name="uid" value="{$user.id}">
      	<input type="hidden" name="to_uid" value="{$item.beautician_id}">
      	<input type="hidden" name="url" value="">
	    <input type="hidden" name="professional" id="professional" value="">
	    <input type="hidden" name="punctuality" id="punctuality" value="">
	    <input type="hidden" name="communication" id="communication" value="">
	    <input type="hidden" name="number" id="number" value="{$number}">
      <div class="ol_star">
         <span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="star_go">
         <ul class="clear">
         <li><label>专业</label><span></span><span></span><span></span><span></span><span></span></li>
         <li><label>服务</label><span></span><span></span><span></span><span></span><span></span></li>
         <li><label>手法</label><span></span><span></span><span></span><span></span><span></span></li>
         </ul>
      </div>
      <a class="pj_btn detail_btn">回复</a>
      <div class="mrs_three">
        <textarea name="content" placeholder="服务效果如何，是否严格按流程，利益是否得体（评论至少10个字哦）" >{$comment.content}</textarea>
        <div class="pic_add">
             <ul>
                <li>
                	<div style="position: relative;">
                		<img src="__FONT__/images/pinjia_05.jpg" >
                		<input type="file" id="uploadCommentPhoto" name="comment_photo" multiple="multiple" style="">
                	</div>
                </li>
             </ul>
        </div>
        <input type="submit" value="提交评论" class="pj_submit">
      </div>
      </form>
	</section>
	
	<script src="__ADMIN__/js/plugins/fileupload/jquery.ui.widget.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.iframe-transport.js"></script>
	<script src="__ADMIN__/js/plugins/fileupload/jquery.fileupload.js"></script>
	<script type="text/javascript">
	$(function () {
		$('.submitForm').click(function () {
			$('form').submit();
		});
		$('input[name="url"]').val(window.location.href);
		$("#uploadCommentPhoto").fileupload({
			url: "{:U('/Comment/Index/uploadCommentPhoto')}",
			dropZone: null,
			pasteZone: null,
			autoUpload: true,
			limitConcurrentUploads: 5,
			add: function (e, data) {
				if (e.isDefaultPrevented()) {
	                return false;
	            }
	
	            var html = '';
	            for (var i in data.files) {
	            	html += '<li>'
	              		+'<div class="div_img">'
							+'<div class="progress progress-sm active">'
			                    +'<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">'
			                      +'<span class="sr-only">0%</span>'
			                    +'</div>'
		                  	+'</div>'
	              		+'</div>'
	              	+'</li>';
	            }
	            
	            $('.pic_add li:last').before(html);
            	data.submit();
			},
			formData:{
				num: $('#number').val()
			},//如果需要额外添加参数可以在这里添加  
			done:function(e, result){  
				 var completeElem = $(result.content).parents('li');
		        
		        var data = result.result;
		        var html = '<li>'
	          		+'<input type="hidden" name="comment_photo[]" value="'+data[0].name+'">'
	          		+'<img src="'+data[0].url+'" />'
	          	+'</li>';
	          	
		        completeElem.replaceWith(html);
			},
		    progress: function (e, data) {
		    	var files = data.originalFiles;
		    	var file = data.files [0];
		    	var index;
		    	for (var i in files) {
		    		if (files [i].name == file.name) {
		    			index = i;
		    		}
		    	}
		    	
		    	var $progressElems = $('.pic_add').find('.progress');
		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
		    	var progressElem = $progressElems.eq(index);
		    	data.content = progressElem;
		    	progressElem.find('.progress-bar').attr('style', 'width:'+progress + '%');
		    }
		});
	});
	</script>
</body>
</html>